<template>
  <div>
    <el-dialog
      title="编辑用户信息"
      :form="form"
      :editFormVisible="editFormVisible"
      @editUserOk="editUserOk"
      @editUserCancel="editFormVisible = false"
    ></el-dialog>
    <el-dialog
      title="添加用户信息"
      :form="addUserform"
      :addFormVisible="addFormVisible"
      @addUserOk="addUserOk"
      @addUserCancel="addFormVisible = false"
    ></el-dialog>
    <el-row>
      <el-col :span="16">
        <el-input
          placeholder="搜索..."
          v-model="searchVal"
          v-on:change="search"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      <el-col :span="4">
        <div class="addOperation" @click="addUser">
          <i class="el-icon-circle-plus-outline" style="margin-right:5px"></i>
          <span>添加用户</span>
        </div>
      </el-col>
    </el-row>
    <el-table :data="tableData">
      <!-- <el-table-column prop="avatar" label="头像">
        <template slot-scope="scope">
          <el-avatar
            :src="scope.row.avatar ? scope.row.avatar : circleUrl" :key="scope.row.avatar"
          ></el-avatar>
        </template>
      </el-table-column> -->
      <el-table-column prop="userName" label="用户名"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="phone" label="联系方式"> </el-table-column>
      <el-table-column label="角色" width="140">
        <template slot-scope="scope"
          ><span>{{
            scope.row.role == null ? "" : scope.row.role.roleCode
          }}</span></template
        >
      </el-table-column>
      <el-table-column label="编辑">
        <template slot-scope="scope">
          <img
            src="../../assets/images/userManage/edit.png"
            alt="edit"
            @click="editUser(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="删除">
        <template slot-scope="scope">
          <el-popconfirm
            title="确定删除用户吗？"
            @confirm="deleteUser(scope.row.userId)"
          >
            <img
              slot="reference"
              src="../../assets/images/userManage/delete.png"
              alt="delete"
            />
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <m-pagination
      :total="total"
      :currentPage="currentPage"
      :pageSize="pageSize"
      @changeCurrentPage="changeCurrentPage"
      @changePageSize="changePageSize"
    ></m-pagination>
  </div>
</template>
<script>
import mPagination from "./m-pagination.vue";
import elDialog from "./dialog.vue";
import { request } from "../../utils";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      isThis: 5,
      formLabelWidth: "120px",
      editFormVisible: false,
      form: {},
      addUserform: {},
      addFormVisible: false,
      searchVal: "",
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      //   user: "",
    };
  },
  components: {
    mPagination,
    elDialog,
  },
  watch: {
    currentPage() {
      this.getUserInfoList();
    },
    pageSize() {
      this.getUserInfoList();
    },
  },
  created() {
    this.getUserInfoList();
  },
  methods: {
    getUserInfoList() {
      let ts = this;
      ts.$http({
        method: "GET",
        url: ts.portInterface.getUserInfoList,
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
        },
      }).then((response) => {
        // console.log("zct getUserInfoList",response);
        if (response.data.code == 200) {
          this.tableData = response.data.result.pageList;
          this.total = response.data.result.totalSize;
        }
      });
    },
    deleteUser(id) {
      console.log(id);
      let ts = this;
      ts.$http({
        method: "delete",
        url: ts.portInterface.deleteUser,
        params: {
          userId: id,
        },
      })
        .then((response) => {
          // console.log(response);
          if (response.data.code == 200) {
            ts.$message({
              showClose: true,
              message: "删除成功,正在更新页面",
              type: "success",
            });
            ts.getUserInfoList();
          } else {
            ts.$message({
              showClose: true,
              message: response.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {
          ts.$message({
            showClose: true,
            message: error,
            type: "error",
          });
        });
    },
    search() {
      const ts = this;
      ts.$http({
        method: "GET",
        url: ts.portInterface.searchUser,
        params: {
          account: ts.searchVal,
        },
      })
        .then((response) => {
          // console.log(response);
          if (response.data.code == 200) {
            this.tableData = response.data.result.pageList;
          } else {
            ts.$message({
              showClose: true,
              message: response.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {
          ts.$message({
            showClose: true,
            message: error,
            type: "error",
          });
        });
    },
    addUser() {
      this.addFormVisible = true;
      this.addUserform = {
        roleId: "1",
        avatar: undefined,
        email: undefined,
        password: null,
        phone: undefined,
        userName: undefined,
      };
    },
    addUserOk(userInfo) {
      const ts = this;
      ts.$http({
        method: "POST",
        url: ts.portInterface.addUser,
        data: {
          ...userInfo,
        },
      })
        .then((response) => {
          // console.log(response);
          if (response.data.code == 200) {
            ts.$message({
              showClose: true,
              message: "添加成功,正在更新页面",
              type: "success",
            });
            ts.addFormVisible = false;
            ts.getUserInfoList();
          } else {
            ts.$message({
              showClose: true,
              message: response.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {
          ts.$message({
            showClose: true,
            message: error,
            type: "error",
          });
        });
    },
    editUser(useInfo) {
      this.editFormVisible = true;
      const newobj = {};
      for (const item in useInfo) {
        if (Object.hasOwnProperty.call(useInfo, item)) {
          if (item == "password") {
            continue;
          }
          if (item == "salt") {
            continue;
          }
          if (item == "role" && useInfo.role) {
            newobj["roleId"] = useInfo.role.roleId;
            continue;
          }
          newobj[item] = useInfo[item] ? useInfo[item] : "";
        }
      }
      this.form = newobj;
      console.log("edit form", this.form);
    },
    editUserOk(form) {
      let ts = this;
      ts.$http({
        method: "PUT",
        url: ts.portInterface.editUser,
        data: {
          ...form,
        },
      })
        .then((response) => {
          // console.log("zct edit", response);
          if (response.data.code == 200) {
            ts.$message({
              showClose: true,
              message: "修改成功,正在更新页面",
              type: "success",
            });
            ts.editFormVisible = false;
            ts.getUserInfoList();
            if(localStorage.getItem('userId') == form.userId){
              this.getUserInfo(form.userId)
            }
          } else {
            ts.$message({
              showClose: true,
              message: response.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {
          console.log(error);
          ts.$message({
            showClose: true,
            message: error,
            type: "error",
          });
        });
    },
    getUserInfo(id) {
      request({
        method: "GET",
        url: this.portInterface.getUserInfo,
        params: {
          userId: id,
        },
      }).then((res) => {
        this.$store.commit("setUserInfo", res.result);
      });
    },
    changeCurrentPage(val) {
      this.currentPage = val;
    },
    changePageSize(val) {
      this.pageSize = val;
    },
  },
};
</script>
<style lang="less" scoped>
img {
  width: 25px;
}
.el-row {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .el-col {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.userMsg {
  height: 100%;
  right: 20px;
  top: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .loginOut {
    padding: 5px;
    padding-bottom: 20px;
  }
  span {
    // font-size: 0.25rem;
  }
}

@media screen and (max-width: 1200px) {
  .userMsg {
    span {
      //   font-size: 0.6rem;
    }
  }
}
</style>